<template>
    <div class="bigconn" >
        <div class="isLogged-head" ref="clm"  v-show="Volume" >
            <div class="isLogged-head-information"  >
                <img class="isLogged-head-information-img" src="https://api.isoyu.com/mm_images.php" alt="">
               <div class="isLogged-head-information-box"  >
                <span>111</span>
                <span>111</span>
               </div>
            </div>
            <div class="isLogged-head-navigation" >
                <div v-for="item in arr" :key="item.name" @click="jumpp(item.add)" class="isLogged-head-navigation-text" >
                        <span>{{item.name}}</span>
                        <span>{{item.data}}</span>
                </div>
         
            </div>
            
        </div>
        <div class="isLogged-head-show"  v-show="!Volume" >
            <div class="isLogged-head-information-show"  >
                <img class="isLogged-head-information-img-show" src="https://api.isoyu.com/mm_images.php" alt="">
                <span>111</span>
            </div>    
        </div>
        <div class="isLogged-body" >
            <div class="isLogged-body-order" >
                <p class="isLogged-body-order-text"  >我的订单</p>
                <van-grid>
                    <van-grid-item icon="sign" @click="jumppp('/odredbody','1')" text="全部" />
                    <van-grid-item icon="paid" @click="jumppp('/odredbody','2')"  text="待付款" />
                    <van-grid-item icon="idcard" @click="jumppp('/odredbody','4')" text="待收货" />
                    <van-grid-item icon="cash-on-deliver" @click="jumppp('/odredbody','3')" text="退款/售后" />
                  </van-grid>
                  <p class="isLogged-body-order-text"  >常用工具</p>
                  <van-grid :column-num="4">
                    <van-grid-item v-for="value in vvv" :key="value.name" :icon="value.iocn" @click="jupmadd(value.add)"  :text="value.name" />
                  </van-grid>
            </div>
            <van-divider>为你推荐</van-divider>
            <div class="isLogged-body-order-recommended" >
                
                <div class="isLogged-body-order-recommended-content" v-for="item in listrecommended" :key="item.id" >
                        <img class="isLogged-body-order-recommended-content-img" :src="item.img" alt="">
                    <span class="isLogged-body-order-recommended-content-text" >  {{item.name}}</span>
                    <div class="isLogged-body-order-recommended-content-coupons"  >
                
                            <van-tag plain type="danger">满300减30</van-tag>
                            <van-tag plain type="danger">店铺领卷</van-tag>
                    
                    </div>
                    <span class="isLogged-body-order-recommended-content-price" >
                      ￥{{item.age}}
                    </span>
                </div>
           
            </div>
        </div>
        <!-- <div class="bottomNav">
                <router-link to="/home">首页</router-link>
                <router-link to="/productCate">分类</router-link>
                <router-link to="/messageList">消息</router-link>
                <router-link to="/shoppingCart">购物车</router-link>
                <router-link to="/mypage">我的</router-link>
            </div>
        -->
        <div>
            <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="search" to="/productCate">分类</van-tabbar-item>
            <van-tabbar-item icon="chat-o" to="/messageList">消息</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to="/shoppingCart">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
            </van-tabbar>
            </div>
    </div>
</template>
<script setup lang="ts" >
import {onMounted, ref} from 'vue'
// import "amfe-flexible/index.js";

import  {favorites} from '@/api/my1'
import {useRouter,useRoute} from 'vue-router'
let active =ref(4)
let router =useRouter()
let route=useRoute()
let listrecommended=ref([])
const activeisLogged = ref(0);
const jumppp = (html,ye) =>{
    router.push({path:html,query:{ye:ye}})
}
onMounted(function(){
    favorites()
    .then(res=>{
        console.log(res.data);
        listrecommended.value=res.data.data
        
    })
})
let vvv=ref([
    {name:'收货地址',
add:'/address',
iocn:'location-o'
},
    {name:'我的评价',
add:'/userComent',
iocn:'star-o'},
    {name:'签到中心',
    add:'/SignCenter',
    iocn:'completed'},
    {name:'领卷中心',
    add:'/BroughtVolume',
    iocn:'coupon-o'},
    {name:'客服中心',
    add:'/ServiceChat',
    iocn:'service-o'},
    {name:'店铺直播',
    add:'/StoresLive',
    iocn:'tv-o'},
    {name:'设置',
    add:'/address',
    iocn:'setting-o'}])
let Volume =ref(true)
let clm=ref('')
let arr=ref([{
    name:'收藏夹',
    data:'100',
    add:'/favorites'
},
{
    name:'关注店铺',
    data:'100',add:'/AttentionStore'

},{
    name:'足迹',
    data:'100',
    add:'/footprint'

},{
    name:'卡卷',
    data:'100',
    add:'/coupon'

}])
console.log(clm);
let jupmadd=function(v){
    router.push(v)
    
}
// let clmheight =clm.value.offsetHeight
window.addEventListener('scroll',function(){
    
   if( document.documentElement.scrollTop>130){
    Volume.value=false
   }else{
    Volume.value=true

   }

   
   
    
})
let jumpp=function(v){
    router.push(v)

}

</script>
<style>
.bottomNav{
        position: fixed;
        width: 100%;
        height: 50px;
        bottom:0;
        background: #ffffff;
        border-top:3px solid #eae9e5;
        z-index: 999;
        left: 0;
        display: flex;
        justify-content: space-around;
        line-height: 50px;
    }
    .isLogged-head{
        width:100%;
        height:100vw;
        box-sizing: border-box;
        background: #c1ab96;
        padding-top: 5vw;
        position: relative;
    }
    .isLogged-head-information{
        width: 100%;
        height: 20vw;
        box-sizing: border-box;
        padding: 2vw;
        display: flex;
    }
    .isLogged-head-information-show{
        width: 100%;
        height: 15vw;
        box-sizing: border-box;
        padding: 2vw;
        display: flex;
    }
    .isLogged-head-information-show span{
        color: #fff;
        padding: 2vw;
    }
    .isLogged-head-navigation{
        width: 100%;
        height: 20vw;
        box-sizing: border-box;
        display: flex;
    }
    .isLogged-head-navigation-text{
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .isLogged-head-navigation-text span{
        flex: 1;
        text-align: center;
        font-size: .5rem;
        padding: .2rem;
        color: #fff;
        font-weight: 600;
    }
    .isLogged-head-information-box{
        display: flex;
        flex-direction: column;
        padding-left: 2vw;
        color: #fff;
        text-align: left;
        
    }
    .isLogged-head-information-box span:nth-child(1){
        font-size: .8rem;
    }
    .isLogged-head-information-box span:nth-child(2){
        font-size: .5rem;
    }
    .isLogged-head-information-img{
        width: 15vw;
        height: 15vw;
        border-radius:50% ;
    }
    .isLogged-head-information-img-show{
        width: 15vw;
        height: 15vw;
        border-radius:50% ;
    }
    .isLogged-body{
        width: 100%;
        height: 100vh;
        display: inline-block;
        border-radius: 5vw ;
        box-sizing: border-box;
        position: absolute;
        top: 50vw;
        background: #fff;
        padding: 4vw;
        padding-bottom:1.3rem ;
    }
    .isLogged-head-show{
        position: fixed;
        top: 0px;
        z-index: 10;
        width:100%;
        height:10vh;
        box-sizing: border-box;
        background: #c1ab96;
    }
   
    .isLogged-body-order-text{
        margin-top: 5vw;

        font-size: .5rem;
        margin-bottom: 3vw;
    }
    .isLogged-body-order-recommended{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
       box-sizing: border-box;

       padding-bottom: 8vw;
    }
    .isLogged-body-order-recommended-content{
        width: 40vw;
        height: 60vw;
        border: 1px solid #dedede;
        border-radius:2vw ;
        margin: 0 2vw ;
        box-sizing: border-box;
        display: flex;
        flex-direction:column ;
        margin-bottom: 3vw;
    }
    .isLogged-body-order-recommended-content-img{
        width: 100%;
        height: 35vw;
    }
  
    .isLogged-body-order-recommended-content-text{
        padding: 1vw;
        font-size: .3rem;

        flex: 2;
    }
    .isLogged-body-order-recommended-content-price{
        flex: 1;
        padding: 1vw;
        font-size: .3rem;
        font-weight: 600;

    }   
    .isLogged-body-order-recommended-content-coupons{
        height:5vw ;
        padding: 1vw;
        line-height: 3vw;

    }
    .isLogged-base{
        width: 100%;
        height: 8vw;
        position: fixed;
        bottom: 0px;
    }
  
</style>